<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Week 5</title>
    </head>
    <body>
		<canvas id="gameCanvas" width="800" height="600"></canvas> 
        <script>
			// create a reference to the canvas and its 2d context.
			var canvas = document.getElementById("gameCanvas");
			var context = canvas.getContext("2d");

			// load bomber image.
			var bomber = new Image();
			bomber.src = "plane_right.png";

			// set initial position of the plane.
            var x = 0;
			var y = 54;

			// set speed
			var bomber_speed;

			// start the flying bomber timer when the image finishes loading.
			bomber.onload = function() {
				x = -bomber.width;
				setInterval(flyBomber, 1000 / 60);
			}
			function flyBomber() {
							
				// draw sky
				context.fillStyle = "#79BAEC";
				context.fillRect(0, 0, canvas.width, canvas.height);
				
				// draw bomber
				context.drawImage(bomber, x, y);
				
				// move bomber a bit
				x += 1;
				
				// reset bomber to left edge of screen...
				if (x > canvas.width) {
					x = -bomber.width;
				}
			}
			function drawSky(){
				// draw sky
				context.fillStyle = "#79BAEC";
				context.fillRect(0, 0, canvas.width, canvas.height);
				alert("Hello World");
				
				//draw sun
				context.fillStyle = "#FFFF44";
				context.arc(120, 110, 70, 0, 2 * Math.PI);
				context.fill();
				flyUp();
				flyRight();
				flyDown();
				flyLeft();
				}

			function flyRight() {
							
				// draw bomber
				x = -bomber.width
				y = getRandomInt(0, (canvas.height - bomber.height);
				context.drawImage(images.plane_down, x, y);
				
				// move bomber a bit
				for (var b; b > 4; b--){
					bomber_speed =  getRandomInt(0, 3);
				}				
				x += bomber_speed*2;
				
				// reset bomber to left edge of screen...
				if (x > canvas.width) {
					x = -bomber.width;
				}
			}

			function flyUp() {


				// draw bomber
				x = getRandomInt(0,canvas.width);
				y = getRandomInt();
				context.drawImage(images.plane_down, x, y);
				


				// move bomber a bit
				for (var b; b > 4; b--){
					bomber_speed =  getRandomInt(0, 3);
				}				
				x += bomber_speed*2;
				
				// reset bomber to left edge of screen...
				if (y > canvas.height) {
					y = -bomber.height;
				}
			}
				//
			function flyDown() {
							
				// draw bomber
				x = getRandomInt(0,canvas.width);
				y = getRandomInt();
				context.drawImage(images.plane_down, x, y);


				// move bomber a bit
				for (var b; b > 4; b--){
					bomber_speed =  getRandomInt(1, 3);
				}				
				x += bomber_speed*2;
				
				// reset bomber to left edge of screen...
				if (x > canvas.width) {
					x = -bomber.width;
				}
			}

			function flyLeft() {

				// draw bomber
				x = getRandomInt(0,canvas.width);
				y = getRandomInt();
				context.drawImage(images.plane_down, x, y);
				
				// move bomber a bit
				for (var b; b > 4; b--){
					bomber_speed =  getRandomInt(0, 3);
				}				
				x += bomber_speed*2;
				
				// reset bomber to left edge of screen...
				if (x > canvas.width) {
					x = -bomber.width;
				}
			}


			var numImages = 4;
			var numImagesLoaded = 0;
			
			var images = {};

			/*loadImage("plane_left");
			loadImage("plane_right");
			loadImage("plane_up");
			loadImage("plane_down");*/

			drawSky();
			
			function loadImage(imageName) {
				var image = new Image();
				images[imageName] = image;
				
				image.onload = onImageLoaded;
				image.src = imageName + ".png";
			}
			
			// this function is called once for each image loaded.
			function onImageLoaded() {
				++numImagesLoaded;
				
				// start drawing only after we know all images have been loaded.
				if(numImagesLoaded == numImages) {
					drawAllPlanes();
				}
			}
		
			function drawAllPlanes() {
				context.drawImage(images.plane_left, 0, 0);
				context.drawImage(images.plane_right, 64, 0);
				context.drawImage(images.plane_up, 128, 0);
				context.drawImage(images.plane_down, 192, 0);
			}

			function getRandomInt(min, max) {
        		return Math.floor(Math.random() * (max - min + 1)) + min;
    		}
        </script>
    </body>
</html>